
<include file="public@header"/>
<style>
.panel-primary>.panel-heading {
    border-color: none;
}

    .home-info li em {
        float: left;
        width: 120px;
        font-style: normal;
        font-weight: bold;
    }

    .home-info ul {
        padding: 0;
        margin: 0;
    }
    .row{
        margin-left: 0;
        margin-right: 0;
    }
    .panel {
        margin-bottom: 0;
    }

    .grid-sizer {
        width: 10%;
    }

    .grid-item {
        margin-bottom: 5px;
        padding: 5px;
    }
    /*一行放五个图片*/
    .col-xs-1-5,
            .col-sm-1-5,
            .col-md-1-5,
            .col-lg-1-5 {
                position: relative;
                min-height: 1px;
                padding-right: 10px;
                padding-left: 10px;
            } 
    .col-xs-1-5 {
                width: 20%;
                float: left;
            }
            
    @media (min-width: 768px) {
                .col-sm-1-5 {
                    width: 20%;
                    float: left;
                }
            }
            
    @media (min-width: 992px) {
                .col-md-1-5 {
                    width: 20%;
                    float: left;
                }
            }
            
    @media (min-width: 1200px) {
                .col-lg-1-5 {
                    width: 20%;
                    float: left;
                }
            }
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 5px;
        padding-right: 5px;
        /*float: none;*/
    }
    .tb1{
       padding: 10px; 
    }  
    .list-group-item{
        padding: 5px 10px!important;
    }
	.img .marker{position:absolute;border-radius:50%;width:8px;height:8px;background:#f00;}
	.img{position:relative;}
</style>
<hook name="admin_before_head_end"/>
</head>
<body style="background-color: #E5F3E6">

<div class="row" style="margin-top: 15px;">
        <div class="panel panel-default ">
                <div class="panel-heading">
                <div style="">
                    <h3 class="panel-title">岗位风险一览图</h3>
                </div>
                <div style="text-align: center;margin:0;padding: 0;">
                    <h3 class="panel-title" style="margin-top: -15px;"><b id="hd1">河南中原天宏装备制造有限公司</b>
                    </h3>
                </div>
                <div style="float: right;">
                    <button id="btBack" style="margin-top: -39px;" 
                     class="btn btn-default"  
                        onclick="submitmark()">保存标点
                    </button>
					<button id="btBack" style="margin-top: -39px;" 
                     class="btn btn-default"  
                        onclick="clearmark()">清除标点
                    </button>
					 <!-- <button id="btBack" style="margin-top: -39px;"  -->
                     <!-- class="btn btn-default"   -->
                        <!-- onclick="zoomout()">放大 -->
                    <!-- </button> -->
                    <!-- <button id="btBack" style="margin-top: -39px;"  -->
                    <!-- class="btn btn-default"   -->
                        <!-- onclick="zoommin()">缩小 -->
                    <!-- </button> -->
                    <!-- <button id="btBack" style="margin-top: -39px;"  -->
                    <!-- class="btn btn-default"   -->
                        <!-- onclick="zoomZero()">还原 -->
                    <!-- </button> -->
                    <button id="btBack" style="margin-top: -39px;" 
                    class="btn btn-default"  
                        onclick="backIndex()">{:lang('BACK')}
                    </button>
                </div>
                </div>
                <div class="panel-body home-info" >
                    <!-- 模态框（Modal）   onmousewheel="bigimg(this)" -->
                    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg" 
                        style="width: 1028px;height: 800px;overflow:auto;" >
                            <div class="modal-content"   >
                                <div class="modal-header">
                                    <button type="button" class="close" 
                                    data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">风险区域选择</h4>
                                </div>
								<form class="row" method="post"action="{:url('admin/coordinate/coordinatesave')}">
								<input type="hidden" id="dangerAreaCoordinate" name="dangerAreaCoordinate" value="">
								<div class="col-md-3">
								<label>请选择需要标定的风险区域：</label>
									<select class="form-control " name="dangerAreaID" id="dangerAreaID">
									<foreach name="data" item="vo">
										<option value="{$vo.dangerAreaID}">{$vo.dangerAreaName}</option>
									</foreach>
									</select>
                                    <div class="modal-footer">
										<button type="submit" class="btn btn-primary">{:lang('SAVE')}</button>
                                        <button type="button" 
                                        class="btn btn-default" 
                                        data-dismiss="modal">关闭</button>
                                    </div>
								</div>
								</form>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                    </div>
                    <!--onmousewheel="bigimg(this)"-->
                    <div class="row img" id="dv"style="">
                        <img src="__STATIC__/images/gs.jpg"  style="width:100%"
                             id="monitor_map" 
                             />  
										 
                    </div>
                </div>
        </div>
</div> 

<script src="__STATIC__/js/admin.js"></script>
<php>
    $lang_set=defined('LANG_SET')?LANG_SET:'';
    $thinkcmf_version=defined('THINKCMF_VERSION')?THINKCMF_VERSION:'';
</php>
<script>
var markercoordinate=new Array();
    function createMarker(x, y,divName) {
        var div = document.createElement('div');
        div.className = 'marker'; 
		div.style.left = x - 4 + 'px';
		div.style.top = y - 4 + 'px';
        document.getElementById(divName).appendChild(div)
    }   
    
    document.getElementById('dv').onclick = function (e) {
        e = e || window.event;
        <!-- var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY; -->
		var x = e.pageX - $('#monitor_map').offset().left;
        var y = e.pageY - $('#monitor_map').offset().top;
        createMarker(x, y,'dv');
		markercoordinate.push(x/$('#monitor_map').width());
		markercoordinate.push(y/$('#monitor_map').height());
		console.log(markercoordinate);
    }

    //返回首页
    function backIndex(){
        window.location.href = '/public/index.php/admin/main/index';
    }
	function clearmark(){
		markercoordinate = [];//清空标点坐标
		$('.marker').remove();		
		<!-- console.log(markercoordinate); -->
	}
    //按钮点击事件
	function submitmark(){
        <!-- e = e || window.event; -->
        <!-- var imgId ='#'+ $(e.target).attr('id'); -->
        <!-- var currentWidth = $(imgId).width(); -->
        <!-- var currentHeight = $(imgId).height(); -->
        <!-- //alert('图片宽度为:' + currentWidth + '，' + '图片高度为:'+ currentHeight); -->
        <!-- //pageX() 属性是鼠标指针的位置，相对于文档的左边缘。 -->
        <!-- //pageY() 属性是鼠标指针的位置，相对于文档的上边缘。 -->
        <!-- //每个元素都有offsetTop和offsetLeft属性， -->
        <!-- //表示该元素的左上角与父容器（offsetParent对象）左上角的距离 -->
        <!-- var offsetX = e.pageX - $(imgId).offset().left; -->
        <!-- var offsetY = e.pageY - $(imgId).offset().top; -->
        <!-- var x = (offsetX / currentWidth).toFixed(4);//相对于图片的宽度的占比 -->
        <!-- var y = (offsetY / currentHeight).toFixed(4);//相对于图片的高度的占比 -->
	<!-- alert("X coords: " + x + ", Y coords: " + y+'图片宽度为:' + currentWidth + '，' + '图片高度为:'+ currentHeight); -->
	$('#myModal').modal('show');
	$('#dangerAreaCoordinate').val(markercoordinate);
}
	function oneclick11(){

		<!-- console.log('11111'); -->

		}		
	    function zoommark(){

    }
    function zoomout(){
         var myImg = document.getElementById("monitor_map");
        
         var cruWidth = myImg.clientWidth;
         // alert(cruWidth);
        var cruHeight = myImg.clientHeight;
         //alert(cruWidth);   // 
          myImg.style.width = (cruWidth * 1.5) +"px";
           myImg.style.height = (cruHeight  * 1.5) +"px";
          //alert(cruHeight);
    }
    function zoommin(){
     var myImg = document.getElementById("monitor_map");
        var cruWidth = myImg.clientWidth;
        var cruHeight = myImg.clientHeight;
        if(myImg.style.width == 500+"px"){
            alert("缩小到最小范围");
        }else{
             myImg.style.width = (cruWidth / 1.5) +"px";
            myImg.style.height = (cruHeight / 1.5) +"px";
        }
    }
    function zoomZero(){
        
        var myImg = document.getElementById("monitor_map");
        var srcImg = document.getElementById('monitor_map').getAttribute("src");
        var srcc = "__STATIC__/images/gs.jpg";
        //更换图片
        document.getElementById('monitor_map').src=srcc;
    }
    
   

    Wind.css('dragula');
    Wind.use('masonry', 'imagesloaded', 'dragula', function () {
        var $homeGrid = $('.home-grid').masonry({
            // set itemSelector so .grid-sizer is not used in layout
            itemSelector: '.grid-item',
            // use element for option
            columnWidth: '.grid-sizer',
            percentPosition: true,
            horizontalOrder: false,
            transitionDuration: 0
        });

        $homeGrid.masonry('on', 'layoutComplete', function (event, laidOutItems) {
        });


        $homeGrid.masonry();

        var containers = [];
        $('.home-grid .grid-item').each(function () {
            containers.push(this);
        });
        dragula(containers, {
            isContainer: function (el) {
                return false; // only elements in drake.containers will be taken into account
            },
            moves: function (el, source, handle, sibling) {
                return true; // elements are always draggable by default
            },
            accepts: function (el, target, source, sibling) {
                return true; // elements can be dropped in any of the `containers` by default
            },
            invalid: function (el, handle) {
                return false; // don't prevent any drags from initiating by default
            },
            direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
            copy: false,                       // elements are moved by default, not copied
            copySortSource: false,             // elements in copy-source containers can be reordered
            revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
            removeOnSpill: false,              // spilling will `.remove` the element, if this is true
            mirrorContainer: document.body,    // set the element that gets mirror elements appended
            ignoreInputTextSelection: true     // allows users to select input text, see details below
        }).on('drop', function (el, target, source, sibling) {
            var $target          = $(target);
            var targetClasses    = $target.attr('class');
            var targetDataWidget = $target.data('widget');
            var targetDataSystem = $target.data('system');
            var $source          = $(source);
            var sourceClasses    = $source.attr('class');
            var sourceDataWidget = $source.data('widget');
            var sourceDataSystem = $source.data('system');
            $(source).append($(target).find('.dashboard-box').not('.gu-transit'));
            $(target).append(el);
            $target.attr('class', sourceClasses);
            $target.data('widget', sourceDataWidget);
            $target.data('system', sourceDataSystem);

            $source.attr('class', targetClasses);
            $source.data('widget', targetDataWidget);
            $source.data('system', targetDataSystem);
            $homeGrid.masonry();

            _widgetSort();
        }).on('shadow', function (el, container, source) {
            $homeGrid.masonry();
        });
    });

    function _widgetSort() {
        var widgets = [];
        $('.home-grid .grid-item').each(function () {
            var $this = $(this);

            widgets.push({
                name: $this.data('widget'),
                is_system: $this.data('system')
            });
        });

        $.ajax({
            url: "{:url('main/dashboardWidget')}",
            type: 'post',
            dataType: 'json',
            data: {widgets: widgets},
            success: function (data) {

            },
            error: function () {

            },
            complete: function () {
            }
        });
    }

    //获取官方通知
    $.getJSON("http://www.thinkcmf.com/service/sms_jsonp.php?lang={$lang_set}&v={$thinkcmf_version}&callback=?",
        function (data) {
            var tpl      = '<li><em class="title"></em><span class="content"></span></li>';
            var $notices = $("#thinkcmf-notices");
            $notices.empty();
            if (data.length > 0) {
                $('#thinkcmf-notices-grid').show();
                $.each(data, function (i, n) {
                    var $tpl = $(tpl);
                    $(".title", $tpl).html(n.title);
                    $(".content", $tpl).html(n.content);
                    $notices.append($tpl);
                });
            } else {
                $notices.append("<li>^_^,{:lang('NO_NOTICE')}~~</li>");
            }
        });

    Wind.css('dragula');
    Wind.use('masonry', 'imagesloaded', 'dragula', function () {
        var $homeGrid = $('.home-grid').masonry({
            // set itemSelector so .grid-sizer is not used in layout
            itemSelector: '.grid-item',
            // use element for option
            columnWidth: '.grid-sizer',
            percentPosition: true,
            horizontalOrder: false,
            transitionDuration: 0
        });

        $homeGrid.masonry('on', 'layoutComplete', function (event, laidOutItems) {
        });


        $homeGrid.masonry();

        var containers = [];
        $('.home-grid .grid-item').each(function () {
            containers.push(this);
        });
        dragula(containers, {
            isContainer: function (el) {
                return false; // only elements in drake.containers will be taken into account
            },
            moves: function (el, source, handle, sibling) {
                return true; // elements are always draggable by default
            },
            accepts: function (el, target, source, sibling) {
                return true; // elements can be dropped in any of the `containers` by default
            },
            invalid: function (el, handle) {
                return false; // don't prevent any drags from initiating by default
            },
            direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
            copy: false,                       // elements are moved by default, not copied
            copySortSource: false,             // elements in copy-source containers can be reordered
            revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
            removeOnSpill: false,              // spilling will `.remove` the element, if this is true
            mirrorContainer: document.body,    // set the element that gets mirror elements appended
            ignoreInputTextSelection: true     // allows users to select input text, see details below
        }).on('drop', function (el, target, source, sibling) {
            var $target          = $(target);
            var targetClasses    = $target.attr('class');
            var targetDataWidget = $target.data('widget');
            var targetDataSystem = $target.data('system');
            var $source          = $(source);
            var sourceClasses    = $source.attr('class');
            var sourceDataWidget = $source.data('widget');
            var sourceDataSystem = $source.data('system');
            $(source).append($(target).find('.dashboard-box').not('.gu-transit'));
            $(target).append(el);
            $target.attr('class', sourceClasses);
            $target.data('widget', sourceDataWidget);
            $target.data('system', sourceDataSystem);

            $source.attr('class', targetClasses);
            $source.data('widget', targetDataWidget);
            $source.data('system', targetDataSystem);
            $homeGrid.masonry();

            _widgetSort();
        }).on('shadow', function (el, container, source) {
            $homeGrid.masonry();
        });


    });

    function _widgetSort() {

        var widgets = [];
        $('.home-grid .grid-item').each(function () {
            var $this = $(this);

            widgets.push({
                name: $this.data('widget'),
                is_system: $this.data('system')
            });
        });

        $.ajax({
            url: "{:url('main/dashboardWidget')}",
            type: 'post',
            dataType: 'json',
            data: {widgets: widgets},
            success: function (data) {

            },
            error: function () {

            },
            complete: function () {

            }
        });
    }

    //获取官方通知
    $.getJSON("http://www.thinkcmf.com/service/sms_jsonp.php?lang={$lang_set}&v={$thinkcmf_version}&callback=?",
        function (data) {
            var tpl      = '<li><em class="title"></em><span class="content"></span></li>';
            var $notices = $("#thinkcmf-notices");
            $notices.empty();
            if (data.length > 0) {
                $('#thinkcmf-notices-grid').show();
                $.each(data, function (i, n) {
                    var $tpl = $(tpl);
                    $(".title", $tpl).html(n.title);
                    $(".content", $tpl).html(n.content);
                    $notices.append($tpl);
                });
            } else {
                $notices.append("<li>^_^,{:lang('NO_NOTICE')}~~</li>");
            }
        });
</script>

<hook name="admin_before_body_end"/>
</body>
</html>